<template>
  <div>
    <router-view v-slot="{ Component,route }">
      <!-- //Component: 要传递给 <component> 的 VNodes 是 prop。route: 解析出的标准化路由地址。 -->
      <transition name="slide-fade">
        <!-- 失活的组件将会被缓存 -->
        <keep-alive>
          <component :is="Component" :key="route.meta.title" v-if="route.meta.keepAlive"/>
        </keep-alive>
      </transition>
      <!-- 向右移动80px -->
      <transition name="slide-fade">
          <component :is="Component" :key="route.meta.title" />
      </transition>
    </router-view>

    <!-- <router-view/> -->
  </div>
</template>
<script>
export default {
  created() {
    this.aa();
  },
  methods: {
    aa() {
      console.log(this.$route, "111111111");
    },
  },
};
</script>
<style lang="less" scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter {
  transform: translateX(0px);
  opacity: 0;
}
.slide-fade-enter-from, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(-80px);
  opacity: 0;
}
</style>